<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #box {
            height: 100%;
        }

        #box {
            width: 100vw;
            display: flex;
            flex-direction: column;
            align-content: center;
        }

        .inner {
            font-size: 80px;
            font-weight: 800;
            width: 100vw;
            height: 30vh;
            line-height: 30vh;
            text-align: center;
        }

        #res {
            vertical-align: middle;
            height: 80px;
            font-size: 40px;
            width: 95vw;
        }

        #opera {
            width: 300px;
            height: 15vh;
            margin: 0 auto;
            font-size: 30px;
            border-radius: 100px;
            outline: none;
        }
        #realy{
            height: 20vh;
            line-height: 20vh;
        }
    </style>
</head>

<body>
    <div id="box">
        <button id="opera" onclick="next()">下一题</button>
        <div class="inner">
            <span id="first"></span>
            <span id="todo"></span>
            <span id="second"></span>=
        </div>
        <input id="res" type="text"><br>
        <span id="realy"></span>
    </div>
</body>
<script>
    var box = document.getElementById("box");
    var opera = document.getElementById("opera");
    var first = document.getElementById("first");
    var todo = document.getElementById("todo");
    var second = document.getElementById("second");
    var res = document.getElementById("res");
    var realy = document.getElementById("realy");
    let sparcker = new SpeechSynthesisUtterance();
    sparcker.lang = "zh";
    sparcker.pitch = 6;
    sparcker.rate = 2;
    sparcker.volume = 5;
    var flag = true;
    var firstnum, secondnum, index;
    window.onload = () => {
        next();
    }
    var rgb = {
        r: 0,
        g: 0,
        b: 0,
    }
    var operas = ["+", "-"];
    const synthesis = window.speechSynthesis;
    var voiceText;
    var next = () => {
        if (flag) {
            opera.innerText = "结果"
            synthesis.cancel() 
            res.innerText = null;
            rgb.r = Math.ceil(Math.random() * 255);
            rgb.g = Math.ceil(Math.random() * 255);
            rgb.b = Math.ceil(Math.random() * 255);
            box.style.background = `rgb(${rgb.r},${rgb.g},${rgb.b})`
            box.style.color = `rgb(${255 - rgb.r},${255 - rgb.g},${255 - rgb.b})`;
            firstnum = Math.floor(Math.random() * 100)
            do {
                secondnum = Math.floor(Math.random() * 100)
            } while (secondnum > firstnum);
            index = Math.floor(Math.random() * 2);
            first.innerText = firstnum;
            second.innerText = secondnum;
            todo.innerText = operas[index];
            realy.style.display="none"
            res.style.display="inline"
        } else {
            var ress = getres(firstnum, secondnum, operas[index])
            if (!res.value) {
                synthesis.cancel() 
                voiceText = "还没填答案呢，先填结果呦"
                const utterance = new SpeechSynthesisUtterance(voiceText);
                synthesis.speak(utterance);
                return
            }
            var inputs = res.value * 1;
            if (ress == inputs) {
                voiceText = "陈奕鑫，你真棒，答对了"
                const utterance = new SpeechSynthesisUtterance(voiceText);
                synthesis.speak(utterance);
            }else{
                voiceText = `答错了，正确答案是${ress}`
                const utterance = new SpeechSynthesisUtterance(voiceText);
                synthesis.speak(utterance);
            }
            opera.innerText = "下一题"
            res.value=null
            res.style.display="none"
            realy.style.display="block"
            realy.innerText = "正确答案："+ress
        }
        flag = !flag
    }
    var getres = (num1, num2, opera) => {
        if (opera == "+") {
            console.log();
            return num1 + num2;
        } else {
            return num1 - num2;
        }
    }

</script>

</html>